<template>
    <!-- html结构 -->
    <div class="person">
        <h1>情况三：监视【reactive】定义【对象类型】数据</h1>
        <!-- 注意：
·若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。
·若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。 -->
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个对象</button>

    </div>
</template>
<script setup lang="ts" name="Person">
import { reactive, ref, watch } from 'vue';

let person = reactive({
    name: '张三',
    age: 18

})
function changeName() {
    person.name += '~'
}
function changeAge() {
    person.age += 1
}
function changePerson() {
    // reactive()返回的对象不能直接赋值给对象,
    // 需要使用Object.assign()方法
    // 它相当于浅拷贝，将后面参数依次加入对象中
    Object.assign(person, { name: '王五', age: 20 })
    // person={
    //     name:'王五',
    //     age:20
    // }
}
// 监视reactive定义的对象类型，且默认开启深度监视（隐式创建，无法关闭）
watch(person, (oldPerson, newPerson) => {
    console.log('person被修改了', oldPerson, newPerson);
}, { deep: true, immediate: true })

</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>